<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Vue 数据双向绑定实例</title>

       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
   </head>

   <body>
       <div id="app">
           <input type="text" v-model="name" placeholder="你的名字">
           <!--  Vue.js 支持在{{}}插值的尾部使用管道符“（|）”对数据进行过滤 -->
           <h1>你好， {{ name }}, 当前时间: {{ date | formatDate }}</h1>
           <span v-html="link"></span>
           <div v-pre>{{ 使用 v-pre 属性，跳过当前元素和它的子元素的编译过程 }}</div>
       </div>
   </body>

   <script type="text/javascript">
       // 在月份、日期、小时等小于 10 前面补 0 
       var padDate = function(value){
           return value < 10 ? '0' + value : value;
       }

       var vm = new Vue({
           el: '#app',
           data: {
               name: "Vue",
               date: new Date(),
               link: '<a href="#">v-html 显示的一个链接</a>'
           },
           filters: {
                formatDate: function(value){
                    var date = new Date(value);
                    var year = date.getFullYear();
                    var month = padDate(date.getMonth() + 1);
                    var day = padDate(date.getDate());
                    var hours = padDate(date.getHours());
                    var minutes = padDate(date.getMinutes());
                    var seconds = padDate(date.getSeconds());

                    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
                }
           },
           // el 挂载到实例上后调用
           mounted: function(){
               // 声明一个变量指向 Vue 实例的 this， 保证作用域一致
               var _this = this;
               this.timer = setInterval(function(){
                   _this.date = new Date();
               }, 1000);
           },
           // 实例销毁之前调用
           beforeDestroy: function(){
               if(this.timer){
                   // 清除定时器
                   clearInterval(this.timer);
               }
           }
       })

       console.log(vm.name);
   </script>

</html>
